<template>
  <div class="scan">
    <el-image :src="qrcode">
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>

<script setup name="scan-login">
  import { useBase } from "@/hooks/base/useBase";
  import { useStore } from "@/hooks/store/useStore";

  const { router, i18n } = useBase()
  const { base, user, menu, system } = useStore()

  const loginLoading = ref(false);
  const qrcode = ref('');


  // 登录
  const login = async (form) => {
    if (!form) return;
    form.validate(async (valid, fields) => {
      if (!valid) return;
      loginLoading.value = true;
      try {
        $http({
          url: $http.adornUrl(`/login`),
          method: 'post',
          data: $http.adornData({
            username: dataForm.username,
            password: dataForm.password,
          }),
        }).then(({ data }) => {
          if (data && data.status === 200) {
            // 存储用户的token
            base.setToken(data.data.token)
            user.setUserInfo(data.data.user_info)

            // 清除左侧菜单状态
            menu.setLeftMenuStatus(false)

            router.push({ name: "home" })

          } else {
            $message.error(data.message)
            return
          }
        })
      } finally {
        loginLoading.value = false;
      }
    });
  }

  const loadWechatQrCode = () => {
    $http({
      url: $http.adornUrl('/qrcode'),
      method: 'get',
      params: $http.adornParams({}),
    }).then(({data}) => {
      if (data && data.status === 200) {
        qrcode.value = data.data
      } else {
        $message.error(data.message)
      }
    })
  }

  onMounted(() => {
    loadWechatQrCode()
  })

</script>

<style scoped lang="scss">
  .scan {
    margin: 20px 0 20px 0;
    text-align: center;

    .el-image {
      padding: 0 5px;
      max-width: 200px;
      max-height: 200px;
      width: 100%;
      height: 200px;
    }
  }
</style>
